<template>
  <div class="login">
    <div class="wrapper register-main">
      <h1>【影沐】</h1>
      <form @submit="formSubmit" @reset="formReset">
          <div class="inputItem">
            <input type="text" placeholder="手机号码" @input="mobileInput" placeholder-style="color:#FFFFFF;">
            <p v-if="!mobile.mobileIsTrue">{{mobile.mobileErrMsg}}</p>
          </div>
          <div class="inputItem">
            <input type="password" placeholder="密码" @input="passwordInput" placeholder-style="color:#FFFFFF;">
            <p v-if="!password.passwordIsTrue">{{password.passwordErrMsg}}</p>
          </div>
          <div class="inputItem">
            <div class="codeItem">
              <input type="text" placeholder="图形验证码" @input="codeInput" placeholder-style="color:#FFFFFF;">
              <img class="codeImg" :src="imgCode" ﻿@tap="getCode" alt="">
            </div>
            <p v-if="!code.codeIsTrue">{{code.codeErrMsg}}</p>
          </div>
        <button formType="submit">登录</button>
      </form>
      <div class="register" ﻿@tap="goPage('/person/register')"><span>新用户注册</span></div>
    </div>
    <div class="agree">
      <van-checkbox
        :value="checked"
        checked-color="#EF5A55"
        @change="checked = !checked"
      >
        我已阅读并同意 <span class="link">《用户服务协议》</span><span class="link">《隐私政策》</span>
      </van-checkbox>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        checked: true,
        imgCode: "",
        mobile:{
          mobile: "",
          mobileErrMsg: "",
          mobileIsTrue: false,
        },
        password: {
          password: "",
          passwordErrMsg: "",
          passwordIsTrue: false
        },
        code: {
          code: "",
          codeErrMsg: "",
          codeIsTrue: false
        },
      }
    },
    methods: {
      goPage(url){
        uni.navigateTo({
        	url: url
        })
      },
      getCode(){
        this.$ajax
          .post(this.$api.getCode)
          .then(res => {
            this.imgCode = res;
          })
          .catch(err => {
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      mobileInput(e){
        this.mobile.mobile = e.mp.detail.value;
        if(this.mobile.mobile === ""){
          this.mobile.mobileErrMsg = "请输入手机号！";
          this.mobile.mobileIsTrue = false;
        }
        else if(!(/^1[3456789]\d{9}$/.test(this.mobile.mobile))){
          this.mobile.mobileErrMsg = "手机号格式不正确！";
          this.mobile.mobileIsTrue = false;
        }
        else {
          this.mobile.mobileErrMsg = "";
          this.mobile.mobileIsTrue = true;
        }
      },
      passwordInput(e){
        this.password.password = e.mp.detail.value;
        if(this.password.password === ""){
          this.password.passwordErrMsg = "请输入密码！";
          this.password.passwordIsTrue = false;
        }
        else {
          this.password.passwordErrMsg = "";
          this.password.passwordIsTrue = true;
        }
      },
      codeInput(e){
        this.code.code = e.mp.detail.value;
        if(this.code.code === ""){
          this.code.codeErrMsg = "请输入图形验证码！";
          this.code.codeIsTrue = false;
        }
        else if(!(/^[0-9]{4}$/.test(this.code.code))){
          this.code.codeErrMsg = "验证码格式不正确！";
          this.code.codeIsTrue = false;
        }
        else {
          this.code.codeErrMsg = "";
          this.code.codeIsTrue = true;
        }
      },
      formSubmit(){
        if(this.checked){
          if(this.mobile.mobileIsTrue && this.password.passwordIsTrue && this.code.codeIsTrue){
            this.$ajax
              .post(this.$api.login,{
                mobile: this.mobile.mobile,
                password: this.password.password,
                code: this.code.code
              })
              .then(res => {
                this.$store.dispatch("changeLoginStatus", true);
                ﻿uni.setStorageSync('token', res.token);
                ﻿uni.showToast({
                  title: "登录成功！",
                  icon: 'success',
                  duration: 2000
                });
                let page = getCurrentPages()
                if(page.length > 1){
                  if(page[page.length - 2].route === "person/registerStep"){
                    ﻿uni.switchTab({
                      url:'/pages/index'
                    })
                  }
                  else {
                    ﻿uni.navigateBack({
                      delta: 1
                    })
                  }
                } else {
                  ﻿uni.switchTab({
                    url:'/pages/index'
                  })
                }
              })
              .catch(err => {
                this.getCode();
                ﻿uni.showToast({
                  title: err,
                  icon: 'none',
                  duration: 2000
                })
              });
          }
          else {
            ﻿uni.showToast({
              title: "请输入完整信息！",
              icon: 'none',
              duration: 2000
            })
          }
        }
        else {
          ﻿uni.showToast({
            title: "请先同意用户服务协议！",
            icon: 'none',
            duration: 2000
          })
        }
      },
    },
    onLoad() {
      const self = this;
      this.mobile = {
        mobile: "",
        mobileErrMsg: "",
        mobileIsTrue: false,
      };
      this.password = {
        password: "",
        passwordErrMsg: "",
        passwordIsTrue: false
      };
      this.code = {
        code: "",
        codeErrMsg: "",
        codeIsTrue: false
      }
      this.getCode();
    }
  }
</script>

<style>
  page{
    height: 100% !important;
    width: 100% !important;
    background-image: url("https://test.hrycf.com/front/loginBg.png") !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
    -moz-background-size:100% 100% !important;
    background-color: #4989C0;
    text-align: center;
  }
  h1{
    font-size:60rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    margin-bottom: 192rpx;
  }
  input, .code{
    text-align: left;
    background:rgba(93,91,92,0.4);
    border-radius:41rpx;
    color: white;
    font-size:26rpx;
    font-family:PingFang SC;
    font-weight:500;
    line-height: 81rpx;
    height: 81rpx;
    padding: 0 27rpx;
  }
  .wrapper{
    position: fixed;
    bottom: 24.8%;
    width: 62.5%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  button{
    height:82rpx;
    background:rgba(255,255,255,1);
    border-radius:41rpx;
    line-height: 82rpx;
    font-size:28rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:#D90647;
    margin-bottom: 27rpx;
  }
  .register{
    text-align: right;
    color: white;
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
  }
  .agree{
    position: fixed;
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    bottom: 100rpx;
    margin-left: 67rpx;
  }

  .link{
    color: #EF5A56;
  }
  .codeImg{
    width: 226rpx;
    height: 81rpx;
    border-radius: 81rpx;
  }
  .codeItem{
    display: flex;
  }
  .codeItem input{
    flex: 1;
  }
  .codeItem .codeImg{
    flex: 1;
    margin-left: 16rpx;
  }

  .inputItem{
    margin-bottom: 26rpx;
  }
  .inputItem>p{
    text-align: left;
    color: #EF5A56;
    font-size: 26rpx;
  }
</style>
